
<div class="container">
  <!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>Css | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






  <div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
  <main class="container">
      
      
      <h1 class="title is-3">2018</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">May 12</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/svg/">SVG碎片整理</a></h1>
          <div class="content is-hidden-mobile">
              项目开发中遇到的 SVG 碎片知识收集。
 SVG 碎片整理 SVG  张鑫旭文摘
 SVG和CSS几乎可以看成是同一个年代出来的东西，但是在Web界面展示这块，CSS长期统领江山，SVG偃旗息鼓，直到这些年，SVG开始乘势而上。 然而需求是千变万化的，当我们使用SVG实现一些视觉表现精湛的效果的时候，免不了会有增加一段描述文字的需求。呵呵，这个时候SVG怕是要傻眼了，SVG的元素应付多行文字实在不擅长，如果SVG中的文字可以如同CSS中的表现一样就好了？
 &lt;foreignObject&gt; 元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助&lt;foreignObject&gt;标签，我们可以直接在SVG内部嵌入XHTML元素.
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt; …
            
          </div>
      </article>
      
      
      <h1 class="title is-3">2016</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 18</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/css-performance/">网站性能优化之CSS优化</a></h1>
          <div class="content is-hidden-mobile">
            关键呈现路径 优化关键呈现路径对于改进网页性能至关重要：我们的目标是优先显示与用户要在网页上执行的主要操作有关的内容。
要提供快速的网络用户体验，浏览器需要做许多工作。大多数此类工作我们网络开发人员是看不到的：我们编写标记，屏幕上就会显示出漂亮的网页。但是，浏览器究竟是如何使用我们的HTML，CSS和JavaScrip在屏幕上呈现像素呢？
从收到HTML，CSS和JavaScript字节到对其进行必需的处理从而转变为呈现的像素的过程中还有许多中间步骤，优化性能骑士就是了解这些步骤中发生了什么－即关键呈现路径
通过优化关键呈现路径，可以大大缩短首次呈现网页的时间。另外，了解关键呈现路径还可以为构建高性能交互式应用程序打下基础。
其实，处理交互式更新的过程是相同的，只是在连续循环中完成，理想情况下每秒可以处理60个侦！但是，我们还是按部就班来学校。
首先，开始介绍浏览器如何显示简单网页。
构建 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/css-performance/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 14</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/%E5%93%8D%E5%BA%94%E5%BC%8Fweb%E5%BC%80%E5%8F%91/">响应式Web开发</a></h1>
          <div class="content is-hidden-mobile">
            视觉稿 视觉稿：PSD，效果图等。
 选取一款手机的屏幕宽高作为基准（5s，6s等） 对于retina屏幕（dpr＝2），为了达到高清效果，视觉稿的画布大小会是基准的2倍。  术语 物理像素(physical pixel)
一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和高度值。
设备独立像素（density-independent pixel）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转换为物理像素。
设备像素比（device pixel ratio）
定义了物理像素和设备独立像素的对应关系，它的值可以按如下公式得到：
设备像素比 ＝ 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在JavaScript中，可 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/%E5%93%8D%E5%BA%94%E5%BC%8Fweb%E5%BC%80%E5%8F%91/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Oct 13</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/grid/">CSS Grid</a></h1>
          <div class="content is-hidden-mobile">
            CSS Grid 介绍 CSS Grid 布局是一个二维基于网格的布局系统，目的是彻底改变我们设计基于网格的用户界面。CSS一直被用于布局网页，但是一直没有做好。一开始我们用tables，接着floats，positions和inline-block，但是所有的这些方法本质上都是hacks并且遗留了很多的问题（比如，垂直居中）。Flexbox横空出世，但是它是针对简单的一维布局，没有完全的二维布局。Grid是迄今为止最先的特殊设计的 css 模型，目的是解决迄今为止我们开发网页的时候遇到的布局问题。
父元素属性 display 值： * grid - 块级grid * inline-grid 内联grid
.container{ display: grid|inline-grid; }  Note: column,float,clear,vertical-align对container没有 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/grid/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Jun 21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/font/">CSS Font</a></h1>
          <div class="content is-hidden-mobile">
            Font 继承性
font-face  @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }  字体系列 Serif 衬线字体 这些字体成比例，而且有上下 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/font/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Jun 21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/%E7%B2%BE%E9%80%9Acss%E4%B8%8Ehtml%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">精通CSS与HTML设计模式</a></h1>
          <div class="content is-hidden-mobile">
            2014-12-22 第一章：轻松搞定CSS  设计模式&ndash;精心组织的解决方案
 常用功能的组合 模式的名字，要解决的问题，解决方案和各方面的权衡。  1.2 使用设计模式  通过把45种常见的CSs属性与4种元素（内联，内联块状，块状和表格）和5种定位方法（静态，相对，绝对，固定，浮动）结合创建。 强大威力：很容易利用基础的模式并将它们组合来构造出更加复杂的模式。 background：CSS内建的设计模式。 绝对定位(absolute)：相对另外一个元素从新定位。 文本替换（Text Replacement）：文本藏在图片的后面。这样一来，图片下载失败，可以显示文字。 左外边距（Left Marginal）：个或多个元素移出块状元素。可以使标题放在左边，内容放在右边。 外边距图片字母下沉（Marginal Graphic Dropcap）：块状元素的左边距里创建一个图形化的首 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/%E7%B2%BE%E9%80%9Acss%E4%B8%8Ehtml%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      
      
  </main>
  <section class="section">
  <div class="container">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-left"></i>
            </span>
            上一页
          </a>
          
        </div>
      </div>
      <div class="level-right is-marginless">
        <div class="level-item">
          
          <a class="button is-rounded" href="../../tags/css/page/2/">
            下一页
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-right"></i>
            </span>
          </a>
          
        </div>
      </div>
    </nav>
  </div>
</section>

  <section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


</div>